<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后厨页面</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
 table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  .button {
    background-color: #4CAF50; /* 绿色背景 */
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
  }
  .button-red {
    background-color: #f44336; /* 红色背景 */
  }
</style>
</head>
<%	
    String cooker_name = request.getParameter("customer_name");
    String restaurant_name = request.getParameter("restaurant_name");
    System.out.print(restaurant_name);
%>

<script>
// 定义刷新页面的函数
function refreshPage() {
    window.location.reload(); // 这将重新加载当前页面
}
// 设置定时器，每秒钟调用一次refreshPage函数
setInterval(refreshPage, 2000);
</script>
<body>
      <!-- 导航 start -->
			<ul class="kit-nav">
				<li><a href="#"><%=restaurant_name%>小餐馆</a></li>
				<li><a href="#">制作菜品</a></li>
				<li><a href="manageMeal.jsp?customer_name=<%=cooker_name%>&restaurant_name=<%=restaurant_name%>">菜品管理</a></li>
				 <li><a href="#">用户:<%=cooker_name %></a></li>
			</ul>
			

	<!-- 导航 end -->
<!-- 正在制作 -->
<h2>正在制作</h2>
<p>当前时间：<span id="clock"></span></p>

<script>
function updateClock() {
	  var now = new Date(); // 当前时间
	  var hours = now.getHours(); // 小时
	  var minutes = now.getMinutes(); // 分钟
	  var seconds = now.getSeconds();
	  hours = hours < 10 ? '0' + hours : hours;
	  minutes = minutes < 10 ? '0' + minutes : minutes;
	  seconds = seconds < 10 ? '0' + seconds : seconds;
	  document.getElementById('clock').textContent = hours + ':' + minutes + ':' + seconds;
}
setInterval(updateClock, 1000);
updateClock();
</script>

<%
    Connection conn = null;
    Statement stmt = null;
    ResultSet rs = null;
    try {
      Class.forName("org.mariadb.jdbc.Driver"); // 加载驱动
      conn = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
      stmt = conn.createStatement();
      String sql ="SELECT * FROM dish d,customers c WHERE d.state='等待制作' AND c.`name` = d.customer_name AND c.res = '"+restaurant_name+"' ORDER BY d.order_num ASC LIMIT 2 ;";
      
      rs = stmt.executeQuery(sql);

      while(rs.next()) {
        String meal_name = rs.getString("meal");
        String order_num = rs.getString("order_num");
        String num = rs.getString("num");

  %>
<div style="display: flex; justify-content: space-between;">
  <table>
    <tr>
      <th>菜品图片</th>
      <th>菜品信息</th>
      <th>操作</th>
    </tr>
    <tr>
      <td><img src="../img/<%=meal_name%>.jpg" alt="菜品图片" width="100"></td>
      <td>
        <a ><%=meal_name %></a><br>
        单号: <%=order_num %>
      </td>
      <td>
        <a href='saveOverDish.jsp?meal_name=<%=meal_name%>&order_num=<%=order_num %>&customer_name=<%=cooker_name%>&restaurant_name=<%=restaurant_name %>' class="button">出菜</a>
        <a href='soldOutDish.jsp?meal_name=<%=meal_name%>&order_num=<%=order_num %>&customer_name=<%=cooker_name%>&restaurant_name=<%=restaurant_name %>' class="button button-red">下架</a>
      </td>
    </tr>
    <%
      }
    } catch (SQLException | ClassNotFoundException e) {
      e.printStackTrace();
    } finally {
      // 关闭资源
      try { if (rs != null) rs.close(); } catch (SQLException ignored) {}
      try { if (stmt != null) stmt.close(); } catch (SQLException ignored) {}
      try { if (conn != null) conn.close(); } catch (SQLException ignored) {}
    }
  %>
    <!-- 更多行菜品信息... -->
  </table>
</div>


<h2>准备制作</h2>
<table class="second-table">
  <tr>
    <th>菜名</th>
    <th>单号</th>
    <th>数量</th>
    <th>等待时间（分钟）</th>
    <th>操作</th>
  </tr>
<%
    Connection conn2 = null;
    Statement stmt2 = null;
    ResultSet rs2 = null;
    try {
      Class.forName("org.mariadb.jdbc.Driver"); // 加载驱动
      conn2 = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
      stmt2 = conn2.createStatement();
      String sql2 ="SELECT * FROM dish d,customers c WHERE d.state='等待制作' AND c.`name` = d.customer_name AND c.res = '"+restaurant_name+"' ORDER BY d.order_num ASC LIMIT 10 OFFSET 2;";
      //String sql2 ="SELECT * FROM dish,customers c WHERE `state`='等待制作' AND c.name = d.customer_name AND c.res = '"+restaurant_name+"' AND ORDER BY order_num ASC LIMIT 10 OFFSET 2; ";
      // String sql2 ="SELECT * FROM customers c ,dish d ,`table` t WHERE c.table_num = "+table_num+" AND c.order_num = d.order_num AND c.res = '"+restaurant_name+"' AND t.num = c.table_num AND t.state = '已预订' ;";

      //从第3行开始查询
      //SELECT * FROM your_table_name ORDER BY some_column ASC LIMIT 10 OFFSET 2;
      rs2 = stmt2.executeQuery(sql2);

      while(rs2.next()) {
        String meal_name = rs2.getString("meal");
        String order_num = rs2.getString("order_num");
        String num = rs2.getString("num");
        int time = 5; 
  %>
  <tr>
    <td><%=meal_name %></td>
    <td><%=order_num %></td>
    <td><%=num %></td>
    <td><%out.print(time); %></td>
    <td class="button-cell">
      <button>下架</button>
    </td>
  </tr>
<%
      }
    } catch (SQLException | ClassNotFoundException e) {
      e.printStackTrace();
    } finally {
      // 关闭资源
      try { if (rs2 != null) rs2.close(); } catch (SQLException ignored) {}
      try { if (stmt2 != null) stmt2.close(); } catch (SQLException ignored) {}
      try { if (conn2 != null) conn2.close(); } catch (SQLException ignored) {}
    }
  %>
</table>
</body>
</html>
